<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>健康操</title>
    <link rel="stylesheet" href="./base.css" />
    <style>
      .content2 {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-around; */
      }

      @media screen and (min-width: 1000px) {
        .content2 li {
          width: 20%;
          padding: 20px;
        }
        img {
          max-width: 100%;
        }
      }

      .mitao {
        width: 80vw;
        height: 35vw;
        display: none;
      }

      /* 移动端样式 */
      @media screen and (max-width: 800px) {
        .content2 li {
          width: 50%;
          padding: 0px;
        }
        img {
          max-width: 100%;
        }
        .content1 img {
          width: 49%;
        }
        .mitao {
          height: 300px;
        }
      }

      .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        opacity: 0.7;
      }
      .btn {
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
        margin-left: 20px;
      }
    </style>
    <style>
      body {
        margin: 0;
        padding: 1rem;
      }
      .audio-table {
        width: 100%;
        margin-top: 30px;
        font-size: 0.875rem;
      }
      .audio-table td {
        border-bottom: 1px dashed #ddd;
      }
      .audio-table td,
      .audio-table th {
        padding: 5px;
      }
      .col2,
      .col3 {
        text-align: center;
      }
      .col2 {
        color: gray;
      }
      .active td {
        color: #eb4646;
      }
      .play-check {
        display: inline-grid;
        width: 32px;
        height: 32px;
        place-items: center;
        -webkit-appearance: none;
        appearance: none;
        --mask-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 85.333A426.667 426.667 0 1 0 938.667 512 426.667 426.667 0 0 0 512 85.333zm0 768A341.333 341.333 0 1 1 853.333 512 341.333 341.333 0 0 1 512 853.333zm-78.933-523.946A32 32 0 0 0 384 356.267v311.466a32 32 0 0 0 49.067 26.88l249.6-155.306a32.427 32.427 0 0 0 0-54.614z'/%3E%3C/svg%3E");
        color: inherit;
      }
      .play-check::before {
        content: "";
        display: block;
        width: inherit;
        height: inherit;
        background-color: currentColor;
        -webkit-mask: var(--mask-img) no-repeat center / 24px 24px;
        mask: var(--mask-img) no-repeat center / 24px 24px;
      }

      .play-check:checked {
        --mask-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 85.333A426.667 426.667 0 1 0 938.667 512 426.667 426.667 0 0 0 512 85.333zm0 768A341.333 341.333 0 1 1 853.333 512 341.333 341.333 0 0 1 512 853.333zm-64-512h-42.667A21.333 21.333 0 0 0 384 362.667v298.666a21.333 21.333 0 0 0 21.333 21.334H448a21.333 21.333 0 0 0 21.333-21.334V362.667A21.333 21.333 0 0 0 448 341.333zm170.667 0H576a21.333 21.333 0 0 0-21.333 21.334v298.666A21.333 21.333 0 0 0 576 682.667h42.667A21.333 21.333 0 0 0 640 661.333V362.667a21.333 21.333 0 0 0-21.333-21.334z'/%3E%3C/svg%3E");
      }
      td label,
      .play-check {
        cursor: pointer;
      }
      td label:hover,
      .play-check:hover {
        color: #eb4646;
      }
    </style>
  </head>

  <body>
    <ul class="content2">
      <li>
        <img src="./images/health/1.webp" />
      </li>
      <li>
        <img src="./images/health/2.webp" />
      </li>
      <li>
        <img src="./images/health/3.webp" />
      </li>
      <li>
        <img src="./images/health/4.webp" />
      </li>
      <li>
        <img src="./images/health/5.webp" />
      </li>
      <li>
        <img src="./images/health/6.webp" />
      </li>
      <li>
        <img src="./images/health/7.webp" />
      </li>
      <li>
        <img src="./images/health/8.webp" />
      </li>
      <li>
        <img src="./images/health/9.webp" />
      </li>
    </ul>
    <!-- <button class="btn btn-primary">显示视频</button>
    <iframe class="mitao" src="//player.bilibili.com/player.html?aid=85910834&bvid=BV1B7411B7Ht&cid=146849329&page=1&danmaku=0&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->

    <ui-audio id="audio" controls loop="0"></ui-audio>

    <table id="list" class="audio-table">
      <thead>
        <tr>
          <th align="left">播放列表</th>
          <th>时长</th>
          <th>播放</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <template id="tpl">
      ${data.map(function (obj, index) { return `
      <tr>
        <td class="col1"><label for="c${obj.id}">${obj.title}</label></td>
        <td class="col2">${formatTime(obj.duration)}</td>
        <td class="col3"><input id="c${obj.id}" data-index="${index}" class="play-check" type="checkbox" value="${obj.url}" /></td>
      </tr>
      `; }).join('')}
    </template>
  </body>
  <script type="module" src="./src/ui-audio.js"></script>
  <script type="module">
    const dataList = [
      {
        id: "0001",
        title: "目及皆是你",
        duration: "175",
        url: "https://tyst.migu.cn/public/product9th/product44/2021/08/0318/2021%E5%B9%B407%E6%9C%8822%E6%97%A516%E7%82%B935%E5%88%86%E5%86%85%E5%AE%B9%E5%87%86%E5%85%A5%E6%99%BA%E5%85%83%E4%BF%A1%E6%81%AF1%E9%A6%96/%E6%A0%87%E6%B8%85%E9%AB%98%E6%B8%85/MP3_128_16_Stero/69929501159183527.mp3",
      },
      {
        id: "0002",
        title: "西楼别序",
        duration: "228",
        url: "./media/西楼别序.mp3",
      },
      {
        id: "0003",
        title: "木桥小谣",
        duration: "201",
        url: "./media/木桥小谣.mp3",
      },
      {
        id: "0004",
        title: "蜜桃臀训练",
        duration: "192",
        url: "./media/蜜桃臀训练.mp3",
      },
      {
        id: "0005",
        title: "眼保健操",
        duration: "279",
        url: "./media/眼保健操.mp3",
      },
    ];

    String.prototype.interpolate = function (params) {
      const names = Object.keys(params);
      const vals = Object.values(params);

      return new Function(...names, `return \`${this}\`;`)(...vals);
    };

    self.formatTime = function (secs) {
      var minutes = Math.floor(secs / 60) || 0;
      var seconds = secs - minutes * 60 || 0;

      return minutes + ":" + String(seconds).padStart(2, "0");
    };

    let render = function () {
      const tbody = document.querySelector("tbody");
      tbody.innerHTML = tpl.innerHTML.interpolate({
        data: dataList,
      });

      status();
    };

    let status = function () {
      const tbody = document.querySelector("tbody");
      // 播放状态变化
      tbody.querySelectorAll('[type="checkbox"]').forEach((checkbox) => {
        // 先设置所有的都不是播放
        checkbox.checked = false;
        // 如果播放的音频就是当前列表
        if (checkbox.value == audio.src) {
          checkbox.closest("tr").classList.add("active");
          // 是否播放
          if (!audio.paused) {
            checkbox.checked = true;
          }
        } else {
          checkbox.closest("tr").classList.remove("active");
        }
      });
    };

    // 播放执行
    let play = function (index) {
      let data = dataList[index];
      if (!data) {
        return;
      }

      audio.src = data.url;
      audio.label = data.title;

      // 地址设置
      setSrc();

      render();
    };

    let setSrc = function () {
      // 根据 src 获得 index
      let index = dataList.findIndex((obj) => {
        return obj.url === audio.src;
      });

      if (index < 0) {
        return;
      }

      // 标题
      audio.label = dataList[index].title;

      // 上一个，下一个
      let dataPrev = dataList[index - 1];
      let dataNext = dataList[index + 1];

      // 随机
      let arrIndexFilter = [];
      dataList.forEach((obj, i) => {
        if (i !== index) {
          arrIndexFilter.push(i);
        }
      });

      let indexRandNext = arrIndexFilter[Math.floor(Math.random() * arrIndexFilter.length)];

      // 再次随机
      let arrIndexFilter2 = [];
      dataList.forEach((obj, i) => {
        if (i !== index && i !== indexRandNext) {
          arrIndexFilter2.push(i);
        }
      });

      let indexRandprev = arrIndexFilter2[Math.floor(Math.random() * arrIndexFilter2.length)];

      // 开始设置地址
      // 下一个地址处理
      if (!audio.prevsrc) {
        // 如果是随机播放
        if (audio.loop === "1") {
          audio.prevsrc = dataList[indexRandprev].url;
        } else if (dataPrev) {
          audio.prevsrc = dataPrev.url;
        } else {
          audio.prevsrc = "none";
        }
      }

      // 如果有地址，则不处理
      if (!audio.nextsrc) {
        // 如果是随机播放
        if (audio.loop === "1") {
          audio.nextsrc = dataList[indexRandNext].url;
        } else if (dataNext) {
          audio.nextsrc = dataNext.url;
        } else {
          audio.nextsrc = "none";
        }
      }
    };

    // 事件处理
    list.addEventListener("click", function (event) {
      let target = event.target;
      if (target && target.type == "checkbox") {
        if (!this.checked) {
          if (audio.src != target.value) {
            audio.src = target.value;
            audio.prevsrc = "";
            audio.nextsrc = "";
          }
          audio.play();
        } else {
          audio.pause();
        }
      }
    });

    // 第一项数据准备
    play(0);

    // 顺序播放和随机播放的处理
    audio.addEventListener("play", function () {
      // 播放时的地址设置
      setSrc();
      // 状态设置
      status();
    });

    audio.addEventListener("pause", function () {
      // 状态设置
      status();
    });
  </script>
  <script>
    const img = document.querySelectorAll("img");
    for (let i = 0; i < img.length; i++) {
      img[i].addEventListener("click", (e) => {
        if (e.target.className !== "gray") {
          e.target.className = "gray";
        } else {
          e.target.className = "";
        }
      });
    }
    // const box = document.querySelector(".btn");
    // const mitao = document.querySelector(".mitao");
    // box.addEventListener("click", (e) => {
    //   console.log("cur", mitao.style.display);
    //   mitao.style.display = mitao.style.display === 'block' ? "none" : "block";
    // });
  </script>
</html>
